<template>
	<view>
		<view>
			<u-notice-bar type="primary" mode="horizontal" :list="list" @click="handlenotice(NoticeList[0])">
			</u-notice-bar>
		</view>
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="(swiper,index) in swiperList" :key="swiper.id">
						<image :src="swiper.img" @click="toSwiper(index)"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">
					<view class="dots" v-for="(swiper, index) in swiperList"
						:class="[currentSwiper >= index ? 'on' : '']" :key="index"></view>
				</view>
			</view>
		</view>

		<!-- 广告图 -->
		<u-modal v-model="course3_res_show" :content="course3_res_cont"></u-modal>
		<view class="btn">
			<div v-if="AppiontmentCount>0" class="reddot"></div>
			<div class="lessonbtn" @click="tosignup">预约驾校报名接送</div>
		</view>
		<u-modal v-model="show" :content="curnotice.content" :title="curnotice.title"></u-modal>
		<!-- 活动区 -->
		<div style="padding-top: 30rpx;">
			<u-card :title="title" :title-size="36">
				<view class="" slot="body">
					<view class="u-body-item u-flex u-border-bottom u-row-between" v-for="item in NoticeList"
						:key='item.id' @click="handlenotice(item)">
						<view class="u-body-item-title u-line-1 " style="width: 80%;">《{{item.title}}》<span
								class="u-font-13">{{item.content}}</span></view>
						<div class="u-line-1 u-font-13" style="color: #dfdfdf;width: 100rpx;">{{item.createdTime}}</div>
					</view>
				</view>
			</u-card>
		</div>

	</view>

</template>

<script>
	import WXlogin from "../../utils/WXlogin.js"
	import api from '../../utils/api.js'
	import global from '../../utils/global.js'
	export default {
		data() {
			return {
				title: '通知公告',
				list: [
					'yun排班小程序各模块功能正在紧张开发中！！！敬请期待！！！'
				],
				course3_res_show: false,
				course3_res_cont: '',
				user: {},
				show: false,
				curnotice: {},
				showHeader: true,
				afterHeaderOpacity: 1, //不透明度
				headerPosition: 'fixed',
				headerTop: null,
				statusTop: null,
				nVueTitle: null,
				city: '北京',
				currentSwiper: 0,
				// 轮播图片
				swiperList: [],
				NoticeList: [],
				hasmyocc: 0,
				AppiontmentCount: 0,
				textCount: 0
			}
		},
		created() {
			this.setStorageSync()
			this.requestdata()
			this.requestnotice()
			this.requsetRotationChart()
			this.getthreenews()
			this.getTips()
		},
		onShow() {
			this.getthreenews()
			this.setStorageSync()
			this.requestnotice()
			this.requestdata()
		},
		methods: {
			getTips() {

				// 通过排班 和 预约的
				let user = uni.getStorageSync("user")
				api.getUnArrageAndAppointmentList(user.branchId, 2, 1).then(res => {
					console.log("-------------------------arrange---------------------")
					var len = res.data.length
					console.log("len ====" + len)
					if (len != 0) {
						wx.setTabBarBadge({
							index: 2,
							text: "!^v^!"
						})
					}
				})

				api.getUnArrageAndAppointmentList(user.branchId, 2, 2).then(res => {
					console.log("----------------------appointment------------------")
					var len = res.data.length
					console.log("len ====" + len)
					if (len != 0) {
						wx.setTabBarBadge({
							index: 2,
							text: "!^v^!"
						})
					}
				})



			},
			getthreenews() {
				api.getunreadnews(this.user.branchId).then(res => {
					if (res.data > 0) {
						wx.setTabBarBadge({
							index: 2,
							text: res.data.toString()
						})
					}
				})
			},
			setStorageSync() {
				api.getpasscount(this.globalConst.ARRANGEMENT_ARRANGE_TYPE).then((res) => {
					if (new Date().getDay() === 1) {
						uni.setStorageSync('lastcount', 0);
					}
					let lastcount = uni.getStorageSync('lastcount') || 0;
					if (res.code === 0) {
						let currentArrangecount = res.data;
						if (currentArrangecount - lastcount > 0) {
							let count = currentArrangecount - lastcount;
							uni.setStorageSync('hasappointment', count);
							uni.setStorageSync('lastcount', currentArrangecount);
							wx.setTabBarBadge({
								index: 2,
								text: count.toString()
							})
						}
					}
				})
				api.getpasscount(this.globalConst.ARRANGEMENT_APPIONTMENT_TYPE).then((res) => {
					if (new Date().getDay() === 1) {
						uni.setStorageSync('lastAppiontmentCount', 0);
					}
					let lastAppiontmentCount = uni.getStorageSync('lastAppiontmentCount') || 0;
					if (res.code === 0) {
						let currentAppiontmentCount = res.data;
						if (currentAppiontmentCount - lastAppiontmentCount > 0) {
							let count = currentAppiontmentCount - lastAppiontmentCount;
							this.AppiontmentCount = count;
							uni.setStorageSync('hasappointmentcount', count);
							uni.setStorageSync('lastAppiontmentCount', currentAppiontmentCount);
							wx.setTabBarBadge({
								index: 0,
								text: count.toString()
							})
						}
					}
				})
			},
			//消息列表
			toMsg() {
				uni.navigateTo({
					url: '../../msg/msg'
				})
			},
			//搜索跳转
			toSearch() {
				uni.showToast({
					title: '建议跳转到新页面做搜索功能'
				});
			},
			//轮播图跳转
			toSwiper(index) {
				let imgs = this.swiperList.map(item => item.img)
				uni.previewImage({
					urls: imgs,
					current: index,
				})
			},
			tosignup() {
				if (this.user.branchId == null || this.user.email == null || this.user.phone == null) {
					this.course3_res_cont = '请先完善您的个人信息再申请。'
					this.course3_res_show = true
				} else {
					this.AppiontmentCount = 0
					wx.removeTabBarBadge({
						index: 0
					})
					uni.navigateTo({
						url: "../signup/index"
					});
				}
			},
			//分类跳转
			toCategory(e) {
				//uni.showToast({title: e.name,icon:"none"});
				uni.setStorageSync('catName', e.name);
				uni.navigateTo({
					url: '../../goods/goods-list/goods-list?cid=' + e.id + '&name=' + e.name
				});
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			handlenotice(notice) {
				this.curnotice = notice
				this.show = true
			},
			formatDate(times) {
				let date = new Date(times)
				const y = date.getFullYear()
				let m = date.getMonth() + 1
				if (m < 10) m = `0${m}`
				let d = date.getDate()
				if (d < 10) d = `0${d}`
				return `${m}-${d}`
			},
			requsetRotationChart() {
				api.getRotationChart(this.globalConst.INDEX_SWAIPPER).then(res => {
					for (let i = 0; i < res.data.length; i++) {
						let img = {
							id: i,
							src: res.data[i].url,
							img: this.globalConst.imageBaseUrl + res.data[i].image
						}
						this.swiperList.push(img)
					}
				})
			},
			requestnotice() {
				api.getNoticeList(uni.getStorageSync('user').branchId, this.globalConst.INDEX_NOTIFICATION_TYPE).then(
					res => {
						if (res.code == 0) {
							this.NoticeList = res.data
							if (this.NoticeList.length) {
								this.list[0] = '《' + res.data[0].title + '》' + res.data[0].content
							}
							for (let item of this.NoticeList) {
								item.createdTime = this.formatDate(item.createdTime)
							}
						}
					})
			},
			requestdata() {
				api.getUserInfo(uni.getStorageSync('token')).then((res) => {
					this.user = res.data.info
					uni.setStorageSync('userVO', res.data);
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #ededed;
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.swiper {
		width: 100%;
		margin-top: 30upx;
		display: flex;
		justify-content: center;

		.swiper-box {
			width: 92%;
			height: 30.7vw;
			overflow: hidden;
			border-radius: 15upx;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 30.7vw;

				swiper-item {
					image {
						width: 100%;
						height: 30.7vw;
					}
				}
			}

			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;

				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;

					&.on {
						width: (100%/3);
					}
				}
			}
		}
	}

	.category-list {
		width: 92%;
		margin: 0 4%;
		padding: 0 0 30upx 0;
		border-bottom: solid 2upx #f6f6f6;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.category {
			width: 25%;
			margin-top: 50upx;
			display: flex;
			flex-wrap: wrap;

			.img {
				width: 100%;
				display: flex;
				justify-content: center;

				image {
					width: 9vw;
					height: 9vw;
				}
			}

			.text {
				margin-top: 16upx;
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 24upx;
				color: #3c3c3c;
			}
		}
	}

	.banner {
		width: 92%;
		margin: 40upx 4%;

		image {
			width: 100%;
			height: 20vw;
			border-radius: 10vw;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.3);
		}
	}

	.btn {
		position: relative;
		top: 30rpx;
		margin: 0 auto;
		width: 92%;
	}

	.reddot {
		position: absolute;
		background-color: #DD524D;
		margin-right: 0rpx;
		width: 30rpx;
		z-index: 1000;
		left: 100%;
		margin-left: -90rpx;
		top: 50%;
		margin-top: -15rpx;
		height: 30rpx;
		-moz-border-radius: 30px;
		-webkit-border-radius: 30px;
		border-radius: 30px;
	}

	.lessonbtn {
		text-align: center;
		width: 100%;
		height: 100%;
		color: #ffffff;
		border: none;
		font-size: 50upx;
		font-weight: 550;
		letter-spacing: 0.2em;
		font-family: sans-serif;
		line-height: 100rpx;
		background: linear-gradient(30deg, #16ea72, #1aff81);
		margin: 0 10rpx;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
</style>
